<template>
  <div class="tableBox">
    <!--列表-->
    <el-table size="small" :data="listData" style="width: 100%" v-loading="loading"  element-loading-text="拼命加载中">
      <el-table-column align="center" prop="id" label="序号">
      </el-table-column>
      <el-table-column align="center" prop="zId" label="资产编号">
        <template slot-scope="scope">
          <el-link v-if="activeName == 'assets'" type="primary" @click="()=>{ongetDetail(scope.row.zId)}">{{ scope.row.zId }}</el-link>
          <el-link v-else type="primary" @click="()=>{$emit('onGetId',scope.row.zId,activeName)}">{{ scope.row.zId }}</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="zType" label="资产类型">
      </el-table-column>
      <el-table-column align="center" prop="address" label="资产所在地">
      </el-table-column>
      <el-table-column align="center" prop="estimate" label="资产估值">
      </el-table-column>
      <el-table-column v-if="activeName == 'assets'" align="center" label="已录入">
        <template slot-scope="scope">
          <div class="selectIpt">
            {{ onRight(scope.row.status,1) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="activeName == 'assets'" align="center" prop="state" label="已评估">
        <template slot-scope="scope">
          <div class="selectIpt">
            {{ onRight(scope.row.status,2) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="activeName == 'assets'" align="center" prop="state" label="已审计">
        <template slot-scope="scope">
          <div class="selectIpt">
            {{ onRight(scope.row.status,3) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="activeName == 'assets'" align="center" prop="state" label="已发NFT凭证">
        <template slot-scope="scope">
          <div class="selectIpt">
            {{ onRight(scope.row.status,4) }}
            <!-- {{scope.row.state == 'estimating'?'':'✓'}} -->
          </div>
        </template>
      </el-table-column>
      </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <el-dialog title="资产详情" :visible.sync="dialogTableVisible">
            <div v-if="detailObj" class="detail_box">
                <div class="detail_p"><span>资产编号：</span><div>{{ this.detailObj.zId }}</div> </div>
                <div class="detail_p"><span>资产类别：</span><div>{{ this.detailObj.assetType }}</div></div>
                <div v-if="detailObj.list">
                    <div v-for="item in detailObj.list" :key="item.name" class="detail_p">
                       <span>{{item.name}} ：</span>
                       <div v-if="item.valueType == 'images'">
                            <div v-for="(imgs,index) in JSON.parse(item.value)">
                                <img :src="imgs" alt="" >
                            </div>
                        </div>
                        <div v-if="item.valueType != 'images'">
                            {{item.value}}
                        </div>
                       
                    </div>
                </div>
                
            </div>
        </el-dialog>
  </div>
</template>

<script>
import { AssetList , GetAssetInfo } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  props: ['activeName'],
  data() {
    return {
      loading: false, //是显示加载
      dialogTableVisible:false,
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      formInline: {
        from: 1,
        limit: 10,
        "status": this.activeName=='assets'?'':this.activeName,
        "zId": ""
      },
      listData: [],
      detailObj:null
    }
  },
  

  mounted() {
    if(this.activeName){
      // console.log(this.activeName)
      this.getdata(this.formInline)
    }
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  //  staging: 暂存
  //   estimating: 预估中
  //   auditing: 审计中
  //   nftConfirm: nft 待铸造
  //   ausdWaiting: ausd 待铸造
  //   minted: 已铸造
  methods: {
    onRight(state,num){
      if(state == 'staging'){
        return null
      }
      if(state == 'estimating'){
        if(num != 1){
          return null
        }
      }
      if(state == 'auditing'){
        if(num != 1 && num != 2){
          return null
        }
      }
      if(state == 'nftConfirm'){
        if(num == 4){
          return null
        }
      }
      return '✓'
    },
    // 获取转入列表
    getdata(parameter) {
      this.loading = true
      AssetList(parameter)
        .then(res => {
          this.loading = false
          if (res.code != 0) {
            this.$message({
              type: 'info',
              message: res.message
            })
          } else {
            this.listData = res.data.list
            // 分页赋值
            this.pageparm.total = res.data.total
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('列表加载失败，请稍后再试！')
        })
    },

    ongetDetail(zid){
        this.dialogTableVisible = true;
        GetAssetInfo({
            "zId": zid,
            "status": ""
        }).then(res => {
                if (res.code != 0) {
                    this.$message({
                    type: 'info',
                    message: res.message
                    })
                } else {
                    this.detailObj = res.data
                }
            })
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageSize = parm.pageSize
      this.formInline.from = (parm.currentPage-1)*(this.pageparm.pageSize) + 1
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },

  },

  // 注册组件
  components: {
    Pagination
  },
}
</script>

<style scoped>
  .tableBox /deep/ .el-table thead th{
    background-color: #EFF4F9;
    color: #919191;
    border: 0;
    padding: 15px 0;
    font-weight: normal;
    font-size: 14px;
  }
  .tableBox /deep/ .el-table thead th:nth-child(1){
    border-radius: 10px 0 0 10px;
  }
  .tableBox /deep/ .el-table tbody td{
    padding: 15px 0 !important;
  }
  .tableBox /deep/ .el-table thead th:nth-last-child(2){
    border-radius:0 10px 10px 0;
  }

  .selectIpt{
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #999;
    margin: 0 auto;
  }
</style>

 
 